import { createRouter, createWebHistory } from 'vue-router'
import { store } from 'store/store'

export const routes = [
  /** 重定向 */
  {
    path: '/',
    redirect: '/login',
  },
  /** 静态路由 */
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    name: 'login',
  },
  {
    path: '/register',
    component: () => import('@/views/register.vue'),
    name: 'register',
  },
  {
    path: '/index',
    component: () => import('@/views/index.vue'),
    name: 'index',
    redirect: '/index/bigScreen',
    children: [
      { path: '/index/bigScreen', component: () => import('@/views/dataVisual/bigScreen.vue'), name: 'bigScreen' },
      { path: '/index/threeDisplay', component: () => import('@/views/dataVisual/threeDisplay.vue'), name: 'threeDisplay' },
      { path: '/index/freeComps', component: () => import('@/views/freeComps/freeComps.vue'), name: 'freeComps' },
      { path: '/index/onlineTools', component: () => import('@/views/onlineTools/onlineTools.vue'), name: 'onlineTools' },
      { path: '/index/table-echart', component: () => import('@/views/table/table-echart.vue'), name: 'table-echart' },
      { path: '/index/table-other', component: () => import('@/views/table/table-other.vue'), name: 'table-other' },
      { path: '/index/introduction', component: () => import('@/views/introduction/introduction.vue'), name: 'introduction' },
      { path: '/index/reference', component: () => import('@/views/reference/reference.vue'), name: 'reference' },
      { path: '/index/robot', component: () => import('@/views/project/robot.vue'), name: 'robot' },
    ]
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {

  // 全局路由守卫
  // 登录情况
  let state = localStorage.getItem('state');


  if (from.name === 'login') {
    if (state === 'true') {
      return next()
    } else {
      if (to.name === 'register') {
        return next()
      } else {
        return next()
      }
    }
  }

  // 直接更改url打开页面的情况
  if (from.name === undefined) {
    if (state === 'true') {
      // 用户现在是登录了的
      if (to.name !== 'login' && to.name) {
        // 是登录状态，但是用户直接更改url来跳转页面，因为是登录状态，所以去哪都可以
        setTimeout(() => {
          store.commit('setTransition', 'fade')
        }, 1000)
        return next()
      } else {
        // 用户没有登出过, 返回首页
        return next({ name: 'index' })
      }
    } else {
      if (to.name != 'login') {
        // 是登出状态，用户直接更改url来跳转到非登录页面，因为是登出状态，所以强制跳转到登录页面
        return next({ name: 'login' })
      } else {
        // 是登出状态，用户直接更改url来跳转到登录页面，因为是登出状态，所以放行
        return next()
      }
    }
  }

  // 从其它页面打算回到登录页面的情况
  if (to.name === 'login' && from.name) {
    // 只有通过右上角登出按钮，状态才会变成false，否则不变
    if (state === null) {
      return next()
    } else {
      // 停留在原来的页面
      return next({ name: from.name })
    }
  }

  // 其它正常情况
  if (to.name !== 'login' && from.name !== 'login' && to.name && from.name) {
    return next()
  }

})

export default router